<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get } from "@/request/request";
import { config } from "@/config";
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'

const iconColor = ref('#000')
const iconLike = ref('praise-simple')
const fileUrl = ref('');
const fileTYpe = ref('');
const data = ref({
  likes: 0,
});
const fileId = ref('')

onLoad((op) => {
  console.log(op);
  getmaterial(op.id)
  fileId.value = op.id;
});

const getmaterial = (id) => {
  console.log('开始获取文件信息, id:', id);
  get('/get_material', { id: id }, { "sessionKey": uni.getStorageSync("sessionKey") }).then(res => {
    const { data: responseData } = res;
    console.log('获取文件信息成功:', responseData);
    data.value = responseData;
    fileUrl.value = responseData.src;
    fileTYpe.value = getFileExtension(responseData.src);
    console.log('文件类型:', fileTYpe.value, '文件URL:', fileUrl.value);
  }).catch(err => {
    console.error('获取文件信息失败:', err);
  })
}

function getFileExtension(filename) {
  return filename.split('.').pop();
}

const likes = () => {
  // 第一次点击时设置新值
  iconLike.value = 'praise-simple-fill';
  iconColor.value = '#0052D9';
  get('/like_material', { id: fileId.value }, { "sessionKey": uni.getStorageSync("sessionKey") }).then(res => {
    data.value.likes++;
  })
};

</script>

<template>
  <view class="app">
    <template v-if="fileTYpe === 'mp4'">
      <video id="Video" :src="config.baseUrl + '/file/' + fileUrl"></video>
      <view class="file_content">
        <view>{{ data.title }}</view>
        <view style="display: flex;align-items: center">
          <view>所属分类：{{ data.classifyName }}</view>
          <view style="margin-left: 80rpx">所属课程：{{ data.courseName }}</view>
        </view>
        <view style="display: flex">
          <view>访问量：{{ data.preview }}</view>
          <view style="margin-left: 135rpx" @click="likes">
            <TnIcon :color="iconColor" :name="iconLike" size="38" />
            点赞：{{ data.likes }}
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<style lang="scss" scoped>
.app {
  padding-bottom: env(safe-area-inset-bottom);

  #Video {
    width: 100%;
    height: 450rpx;
  }

  .file_content {
    padding: 30rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
</style>
